<!--  -->
<template>
  <div class="banner-box">
    <!-- banner 图片区 -->
    <div class="banner-slide">
      <template v-for="(v, i) in bannerList" :key="i">
        <img :src="v.img_url" class="imgClass" alt="" :class="['imgClass', num == i ? 'show-img' : '']">
      </template>
    </div>
    <!-- 指示器 -->
    <div class="indicator-box">
      <div :class="['indicator', i - 1 == num ? 'active-indicator' : '']" v-for="i in bannerList.length" :key="i"
        @click="num = i - 1">
      </div>
    </div>
    <!-- 切换箭头 -->
    <div class="switch-L" @click="switchLFun"><i class="bi bi-chevron-left"></i></div>
    <div class="switch-R" @click="switchRFun"><i class="bi bi-chevron-right"></i></div>
    <!-- 滚动公告 -->
    <div class="notice-box">
      <div class="notice-icon">
        <i class="bi bi-cup-hot"></i>
        <span>上新公告</span>
      </div>
      <div class="notice-cont">
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero necessitatibus alias beatae obcaecati unde.
          Aliquid est sint cum explicabo suscipit distinctio, quam ratione quas, ipsum molestiae consequuntur, maiores
          pariatur qui.</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import banner1 from '../../assets/images/banner01.jpg';
import banner2 from '../../assets/images/banner02.jpg';
import banner3 from '../../assets/images/banner03.jpg';
import banner4 from '../../assets/images/banner04.jpg';

export default defineComponent({
  name: 'Banner',
  setup() {
    let num = ref(0), timer: any = ref(0);

    const bannerList = ref([
      { id: 1, img_url: banner1 },
      { id: 2, img_url: banner2 },
      { id: 3, img_url: banner3 },
      { id: 4, img_url: banner4 }
    ]);
    // 轮播
    const outoplay = () => {
      num.value++;
      // console.log(`output->`, bannerList.value.length)
      if (num.value === bannerList.value.length) {
        num.value = 0;
      }
    };
    // 定时器
    const play = () => {
      timer.value = setInterval(outoplay, 4000);
    };
    // switchLFun  左切换
    const switchLFun = () => {
      num.value--;
      if (num.value < 0) {
        //  点到左边最后一个 则将最后一个设为当前内容
        num.value = bannerList.value.length - 1
      }
    };

    // switchRFun 右切换
    const switchRFun = () => {
      num.value++;
      if (num.value > bannerList.value.length) {
        // 点到右最后一个,则将左边第一个设为当前内容
        num.value = 0
      }
    };
    // 触发轮播
    onMounted(() => {
      play()
    });
    // 销毁清楚定时器
    onUnmounted(() => {
      clearInterval(timer.value);
      console.log(`output->`, '关闭页面销毁定时器')
    });
    return {
      bannerList, num,
      switchLFun, switchRFun
    }

  }
});
</script>
<style scoped lang="scss">
// 显示图片
.show-img {
  opacity: 1 !important;
}

// 指示器选中
.active-indicator {
  background-color: var(--bgcolor);
  border: 1px solid var(--bgcolor) !important;
}

.banner-box {
  position: relative;
  // width: 1920px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  // margin-top: 70px;

  &:hover .switch-R {
    display: block !important;
    opacity: 1;
  }

  &:hover .switch-L {
    display: block !important;
    opacity: 1;
  }

  .banner-slide {
    height: 100%;
    width: 100%;

    .imgClass {
      position: absolute;
      top: 0;
      left: 50%;
      height: 400px;
      width: inherit;
      transform: translateX(-50%);
      transition: all 3s;
      opacity: 0;
    }
  }

  .indicator-box {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;

    .indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .switch-L {
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba($color: #000000, $alpha: 0.3);
    opacity: 0;
    transition: opacity .2s ease-in;
    // transition: background .2s ease-in;

    &:hover {
      background: rgba($color: #000000, $alpha: 0.5);
    }

    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #e4dfdf;
      font-size: 22px;

      &:hover {
        color: #fff;

      }
    }
  }

  .switch-R {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba($color: #000000, $alpha: 0.3);
    opacity: 0;
    transition: opacity .2s ease-in;

    &:hover {
      background: rgba($color: #000000, $alpha: 0.5);
      // transition: background .2s ease-in;

    }

    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #e4dfdf;
      font-size: 22px;

      &:hover {
        color: #fff;

      }
    }
  }

  // 滚动公告
  .notice-box {
    width: 1100px;
    // height: 40px;
    padding: 12px 15px;
    background-color: #FFF;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    font-size: 14px;

    .notice-icon {
      width: 100px;
      // overflow: hidden;

      i {
        margin-right: 8px;
        color: var(--bgcolor);
      }
    }

    .notice-cont {
      flex: 1;
      overflow: hidden;

      span {
        display: block;
        animation: rollText 20s linear infinite;
        white-space: nowrap;
        padding-left: 100%;
        padding-right: 100%;
      }
    }
  }
}

@keyframes rollText {
  0% {
    transform: translate(0);
  }

  100% {
    transform: translate(-130%);
  }
}


</style>